<template>
    <div style="width: 100%; height: 500px;">
      <div ref="chart" style="width: 100%; height: 100%;"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    data() {
      return {
        chart: null
      }
    },
  
    mounted() {
      this.initChart()
      // 使用防抖函数监听窗口大小变化
      window.addEventListener('resize', debounce(this.handleResize, 300))
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$refs.chart)
        // 调整图表大小
        this.chart.resize()
        // 设置图表配置
        this.chart.setOption({
          title: {
            text: 'ECharts 入门示例'
          },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10]
          }]
        })
      },
  
      handleResize() {
        this.chart.resize()
      }
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize);
      if (this.chart) {
        this.chart.dispose();
        this.chart = null;
      }
    },
  }
  
  // 定义一个防抖函数
  function debounce(fn, delay) {
    // 定义一个定时器变量
    let timer = null;
    // 返回一个新的函数
    return function() {
      // 清除上一次的定时器
      clearTimeout(timer);
      // 保存当前的 this 和 arguments
      let context = this;
      let args = arguments;
      // 设置一个新的定时器
      timer = setTimeout(function() {
        // 在延迟时间后执行原函数
        fn.apply(context, args);
      }, delay);
    }
  }
  </script>
  